<template>
	<!-- 售后申请 -->
	<view class="container">
		<!-- 标题 -->
		<headTitle title="申请退换货" :server="true" :bottomline='true'></headTitle>
		<view class="content bgfff">
			<view class="goods-item flex-center">
				<img class="goods-img" :src="pageData.productPic" mode="aspectFill"></img>
				<view class="right flex-column-between">
					<view class="title show-two-text font28 color333">{{ pageData.productName }}</view>
					<view class="prcie-b flex-center-between font24 color999">
						<view class="attr-box show-one-text">{{ pageData.productAttr }}</view>
						<view>x{{ pageData.productQuantity }}</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="title font34 color333 fontb">退换货原因</view>
				<view class="text">
					<picker :range="array" :value="0" @change="change">
						<input :value="array[cause]" type="text" placeholder="请选择退换货原因" class="font32 color333" disabled />
					</picker>
					<text class="yticon icon-you color666"></text>
				</view>
			</view>
			<view class="item">
				<view class="title font34 color333 fontb">退换货数量</view>
				<view class="input" @tap="focus">
					<text class="num font32 color333" :class="{'show-bl':flicker && !num, 'show-br':flicker && num}">{{ pageData.productQuantity }}</text>
				</view>
			</view>
			<view class="item">
				<view class="title font34 color333 fontb">问题描述</view>
				<textarea v-model="des" class="font32 color333" placeholder="请输入退换货问题描述（500字内）" maxlength="500" />
			</view>
			<view class="photo">
				<view class="title font32 color999">上传凭证（限3张）</view>
				<view class="img">
					<imgDele :src="item" mode="aspectFill" @imgTap='imgTap' :index='index' @deleSuccess='deleSuccess' @stopMove='stopMovingImg' @startMove='startMoveImg' v-for="(item,index) in imgPathList"></imgDele>
					<view @tap="chooseImg" v-if="imgPathList.length<3">
						<image src="/static/svg/tianjia.svg" mode=""></image>
					</view>
				</view>
			</view>
			<button class="button font34 colorfff" :class="{'checked': cause !== -1, 'disable': disable}" v-show="showButton" @tap="submit">提 交</button>
		</view>
		<picturePreview :list='imgPathList' :index='imgIndex' v-if='showPreview'  @confirm='deleSuccess' @cancel='cancelPreview'/>
		<keyboard-package :disableDot="true"  @input="inputValue" ref="keyboard" @close='close'></keyboard-package>
	</view>
</template>

<script>
import Api from '@/common/api'
import headTitle from '@/components/head-title.vue'
import imgDele from "@/components/dele/imgDele.vue"
import picturePreview from "@/components/picturePreview/picturePreview.vue"
import keyboardPackage from '@/components/keyboard-package/keyboard-package.vue'
export default{
	data() {
		return {
			array: [],
			imgPathList:[],
			showPreview:false,
			imgIndex:0,
			showButton:true,
			pageData: {}, // 页面数据
			num: '1', // 退换货数量
			cause: -1, // 退换货原因
			flicker: false, // 光标闪烁
			timer:false, //定时器
			disable: false, // 禁止点击
			id: 0, //申请id
			des: '', // 问题描述
		}
	},
	onLoad(opt) {
		this.id = opt.id
		this.getPageData(opt.id)
	},
	methods: {
		// 提交数据
		async submit() {
			if(this.cause === -1) {
				this.$api.msg('请选择退换货原因')
				return
			}
			this.disable = true
			let params = {
				id: this.id,
				reason: this.array[this.cause],
				nums: this.pageData.productQuantity,
			}
			if(this.des) {
				params.description = this.des
			}
			if(this.imgPathList.length > 0) {
				params.proofPics = this.imgPathList
			}
			let res = await Api.apiCall('post', Api.order.postMarket, params, true)
			if(res) {
				this.$api.msg('退换申请成功')
				setTimeout(() => {
					this.$common.navigateTo('/pages/order/marketServer?status=1')
				}, 500)
			}else {
				this.$api.msg('出错啦！')
				this.disable = false
			}
		},
		// 选择换货的原因
		change(e) {
			this.cause = e.detail.value
		},
		// 数字键盘的输入值
		inputValue(val) {
			val = val.toString()
			var temp = this.num + val
			// 空就是删除
			if(!val){
				this.num = this.num.substring(0, this.num.length-1)
				return
			}
			if(+temp > +this.pageData.productQuantity) {
				this.$api.msg('超过退换数量')
				return
			}
			this.num = temp
		},
		// 关闭数字键盘
		close() {
			this.flicker = false
			clearInterval(this.timer)
			if(!this.num) {
				this.num = '1'
			}
		},
		// 数字键盘弹起
		focus () {
			return
			clearInterval(this.timer)
			this.timer = setInterval(()=>{
				this.flicker = !this.flicker
			},500)
			this.$refs.keyboard.open()
		},
		// 获取页面数据
		async getPageData(id) {
			if(id) {
				let res = await Api.apiCall('get', Api.order.getMarketApply, { id }, true)
				if(res) {
					this.pageData = res
					res.aftersalesReason.map(item => {
						this.array.push(item.name)
					})
				}
			}
		},
		imgTap(index){
			this.imgIndex=index
			this.showPreview=true
		},	
		cancelPreview(){
			this.showPreview=false
		},
		deleSuccess(e){
			this.imgPathList.splice(e,1)
			this.showButton=true
		},
		stopMovingImg(){
			setTimeout(()=>{
				this.showButton=true
			},225)
		},
		startMoveImg(){
			this.showButton=false
		},
		chooseImg() {
			let count=3-this.imgPathList.length
			uni.chooseImage({
				count: count, 
				sizeType: ['compressed', 'original'],
				sourceType: ['album', 'camera'],
				success: res=> {
					if(res.tempFilePaths.length>3||res.tempFilePaths.length+this.imgPathList.length>3||this.imgPathList.length+1>3){
						uni.showToast({
							title: '最多上传3张图片',
							icon:'none',
							duration: 1500
						})
						return
					}
					let obj = {}
					res.tempFilePaths.map(async item => {
						obj = await Api.apiFileCall(item, true) || {}
						this.imgPathList.push(obj.successFile && obj.successFile[0])
					})
				}
			})
		},
	},
	components: {
		headTitle,
		imgDele,
		picturePreview,
		keyboardPackage
	}
}
</script>

<style lang="scss">
page {
	background-color: #F5F5F5;
}

.disable {
	pointer-events: none;
}

.show-bl{border-left-color:#ccc}
.show-br{border-right-color:#ccc}

.content {
	margin-top: 16rpx;
	overflow: hidden;
	.goods-item {
		padding: 30rpx;
		width: 100%;
		height: 186rpx;
		border-bottom: 1rpx solid #DDD;
		.goods-img {
			width: 126rpx;
			height: 126rpx;
			border-radius: 3rpx;
			margin-right: 30rpx;
		}
		.right {
			width: calc(100% - 156rpx);
			height: 126rpx;
			.title {
				transform: translateY(-2px);
				line-height: 42rpx;
			}
			.prcie-b {
				transform: translateY(5px);
				.attr-box {
					width: 466rpx;
				}
			}
		}
	}
	.item {
		padding: 0 30rpx;
		.input-placeholder {
			color: #666;
		}
		.title {
			height: 110rpx;
			line-height: 110rpx;
		}
		.input, 
		input {
			border: 1rpx solid #999;
			margin: 0;
			padding: 16rpx 20rpx;
			width: 690rpx;
			height: 90rpx;
			border-radius: 8rpx;
		}
		.num {
			border: 4upx solid transparent;
			&.show-bl{border-left-color:#1989fa}
			&.show-br{border-right-color:#1989fa}
		}
		.text {
			position: relative;
			.icon-you {
				position: absolute;
				top: 30rpx;
				right: 20rpx;
				font-size: $font-base;
				color: #AEA8A2;
			}
		}
		textarea {
			padding: 24rpx 20rpx;
			width: 690rpx;
			height: 414rpx;
			border-radius: 8rpx;
			border: 1rpx solid #999;
		}
	}
	.photo {
		.title {
			padding: 0 30rpx;
			height: 92rpx;
			line-height: 92rpx;
		}
		.img{
			display: flex;
			margin-top: 20rpx;
			view{
				height: 210rpx;
				width: 210rpx;
				margin-left: 30rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.button{
		width: 560rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin: 48rpx auto;
		border-radius: 50rpx;
		background-color: #C8C8C8;
		&::after {
			border: 0;
		}
		&.checked {
			background-color: #C84739;
		}
	}
}
.select {
	width: 100%;
	height: 604rpx;
}
</style>
